<template>
  <div class="bg-white rounded-lg shadow-sm p-6 mb-6 resume-section relative">
    <div class="flex justify-between items-start mb-6">
      <h2 class="text-xl font-semibold text-gray-800">工作经历</h2>
      <button v-if="!editMode" class="edit-btn p-2 rounded-full hover:bg-gray-100 opacity-0 group-hover:opacity-100">
        <i class="ri-pencil-line text-gray-500"></i>
      </button>
    </div>
    
    <div class="relative space-y-8">
      <div v-for="(experience, index) in experienceList" :key="index" class="timeline-item relative pl-8 hover:bg-gray-50/50 p-4 rounded-lg transition-colors duration-200">
        <div class="absolute left-0 top-4 w-6 h-6 bg-gradient-to-br from-primary/20 to-primary/5 rounded-full flex items-center justify-center border border-primary/10">
          <div :class="index === 0 ? 'w-3 h-3 bg-primary rounded-full animate-pulse' : 'w-3 h-3 bg-gray-400 rounded-full'"></div>
        </div>
        
        <div class="flex justify-between items-start">
          <div>
            <h3 v-if="!editMode" class="font-medium text-gray-800">{{ experience.company }} - {{ experience.position }}</h3>
            <div v-else class="flex gap-2">
              <input v-model="experience.company" type="text" class="font-medium text-gray-800 bg-transparent border-b border-gray-300 focus:border-primary outline-none" placeholder="公司名称">
              <input v-model="experience.position" type="text" class="font-medium text-gray-800 bg-transparent border-b border-gray-300 focus:border-primary outline-none" placeholder="职位名称">
            </div>
            
            <div v-if="!editMode" class="text-gray-600 mt-1">{{ experience.description }}</div>
            <input v-else v-model="experience.description" type="text" class="text-gray-600 mt-1 bg-transparent border-b border-gray-300 focus:border-primary outline-none w-full" placeholder="工作描述">
          </div>
          <div v-if="!editMode" class="text-gray-500">{{ experience.period }}</div>
          <input v-else v-model="experience.period" type="text" class="text-gray-500 bg-transparent border-b border-gray-300 focus:border-primary outline-none" placeholder="工作时间">
        </div>
        
        <div class="mt-3 text-gray-700">
          <p v-if="!editMode" class="mb-2">工作职责与成就：</p>
          <div v-if="!editMode" class="text-gray-600">
            <div v-for="achievement in experience.achievements" :key="achievement" class="mb-1">
              • {{ achievement }}
            </div>
          </div>
          <div v-else>
            <textarea v-model="experience.achievementsText" class="w-full bg-transparent border border-gray-300 rounded p-2 focus:border-primary outline-none h-24" placeholder="请输入工作职责与成就，每行一个要点"></textarea>
          </div>
        </div>
      </div>
      
      <button v-if="editMode" @click="addExperience" class="w-full py-2 border border-dashed rounded-lg text-gray-500 hover:border-primary hover:text-primary">
        <i class="ri-add-line mr-1"></i>添加工作经历
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Props {
  editMode: boolean
}

defineProps<Props>()

const experienceList = ref([
  {
    company: '优趣汇',
    position: '品牌总监',
    period: '2020.07 - 至今',
    description: '负责全渠道品牌策略与执行',
    achievements: [
      '负责公司全渠道品牌策略制定与执行，包括品牌传播、产品推广、渠道营销等工作',
      '主导品牌重塑项目，重新定位目标用户群体，品牌认知度提升40%',
      '策划并执行多个营销活动，其中618大促活动带来销售额同比增长65%',
      '管理5人品牌团队，负责品牌视觉设计、内容营销、社交媒体运营等工作'
    ],
    achievementsText: '负责公司全渠道品牌策略制定与执行，包括品牌传播、产品推广、渠道营销等工作\n主导品牌重塑项目，重新定位目标用户群体，品牌认知度提升40%\n策划并执行多个营销活动，其中618大促活动带来销售额同比增长65%'
  }
])

const addExperience = () => {
  experienceList.value.push({
    company: '',
    position: '',
    period: '',
    description: '',
    achievements: [],
    achievementsText: ''
  })
}
</script>
